import React, {useEffect, useState} from "react";
import {Dimensions, StyleSheet, View, Text, Button, TouchableHighlight, ImageBackground} from "react-native";
import {fontSize_12, fontSize_14, fontSize_15, fontSize_16} from "./theme";
import {SvgXml} from "react-native-svg";
import {closeEye2SvgXml, closeeyeSvgXml, closeSvgXml, infoSvgXml, warningSvgXml} from "../libs/svgXml";
import QRCode from "react-native-qrcode-svg";
import {setCopyMsg} from "../libs/utils";

const {width,height,scale} = Dimensions.get("window");

const L2_PrivateKeyView = ({navigation,route}:any) => {
    const [privateKey,setPrivateKey] = useState(route?.params?.privateKey)
    const [showCode,setShowCode] = useState(false)
    useEffect(()=>{
        navigation.setOptions({
            title:"备份私钥"
        })
    },[])
    return (
        <View style={styles.container}>
            <View style={styles.TipContainer}>
                <SvgXml xml={warningSvgXml('#cf6c65')} width={30} height={30}/>
                <Text style={styles.TipText}>私钥未加密，请谨慎导出，做好安全备份！做私钥备份时，请确保周边没有其他人！</Text>
            </View>
            <View style={styles.QRcodeContainer}>
                <TouchableHighlight underlayColor={"white"} style={{padding:10,backgroundColor:"white"}}
                                    onPress={()=>{
                                        setShowCode(!showCode)
                                    }}
                >
                    {
                        showCode?
                            <QRCode value={privateKey}  size={190} />
                            :
                            <View style={styles.showCodeView}>
                                <SvgXml xml={closeEye2SvgXml("#97989a")} width={60} height={60}/>
                                <Text style={styles.showCodeViewTitle}>点击展示私钥二维码</Text>
                            </View>
                    }

                </TouchableHighlight>
            </View>
            <View style={styles.lineTextContainer}>
                <View style={styles.line}/>
                <Text style={styles.lineText}>明文私钥</Text>
            </View>
            <Text style={styles.keyMain}>
                {privateKey}
            </Text>
            <TouchableHighlight
                underlayColor={"#1f83fd"}
                onPress={()=>{
                    setCopyMsg(privateKey)
                }}
                style={styles.BTNContainer}
            >
                <Text style={styles.BTNTitle}>复制私钥</Text>
            </TouchableHighlight>

        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        alignItems: "center",
        flexDirection: "column",
        paddingLeft: 20,
        paddingRight: 20,
        backgroundColor: "white"
    },
    TipContainer:{
        width:"100%",
        backgroundColor:"#f5f6f8",
        flexDirection:"row",
        alignItems:"center",
        justifyContent:"center",
        paddingLeft:30,
        paddingRight:30,
        paddingTop:10,
        paddingBottom:10,
        marginTop:10,
        marginBottom:10
    },
    TipText:{
        fontSize:fontSize_12,
        color:"#cf6c65",
        flexWrap:"wrap",
        paddingLeft:15,
        fontWeight:"bold",
        lineHeight:18,
        letterSpacing:0.5
    },
    QRcodeContainer:{
        padding:10,
        marginTop:20,
        marginBottom:30,
        backgroundColor:"#e8f0fa",
        borderRadius:20
    },
    showCodeView:{
        width:190,
        height:190,
        backgroundColor:"#f5f6f8",
        alignItems:"center",
        justifyContent:"center"
    },
    showCodeViewTitle:{
        fontSize:fontSize_15,
        color:"#9c9d9f",
        marginTop:10
        // letterSpacing:0.5
    },
    lineTextContainer:{
        width:"100%",
    },
    line:{
        position:"absolute",
        top:"50%",
        left:0,
        width:"100%",
        height:1.2,
        backgroundColor:"#f5f5f5"
    },
    lineText:{
        alignSelf:"center",
        backgroundColor:"white",
        paddingLeft:10,
        paddingRight:10,
        fontSize:fontSize_12,
        letterSpacing:0.5,
        color:"#6b6b6b"
    },
    keyMain:{
        fontSize:fontSize_14,
        padding:20,
        backgroundColor:"#f5f6f8",
        width:"100%",
        textAlign:"center",
        marginTop:20,
        marginBottom:20
    },
    BTNContainer:{
        width:"60%",
        backgroundColor:"#1f83fd",
        paddingTop:10,
        paddingBottom:10,
        borderRadius:8
    },
    BTNTitle:{
        fontSize:fontSize_15,
        alignSelf:"center",
        color:"white",
        letterSpacing:0.5
    }
})
export default L2_PrivateKeyView;


